import { reactive } from "vue"
import { graphic as _graphic } from "echarts"
import { graphic, yAxis, xAxis, fontColor, tooltipOptions, colorList } from "./home-options"
import mapBg from "../images/贴图.jpg"

function generateCircularPath([startX, startY], radius = 0.8) {
  const path = []
  const numPoints = 100 // 生成 100 个节点

  for (let i = 0; i < numPoints; i++) {
    const angle = (i / numPoints) * 2 * Math.PI // 计算每个节点的角度
    const x = startX - radius * Math.cos(angle)
    const y = startY - radius * Math.sin(angle)
    path.push([x + radius, y])
  }

  return path.reverse()
}

export const useOptions = (
  options = {
    trendColor: "24,187,157",
    country: "map",
    lineSeries: {},
    lineYAxis: {},
    lineGrid: {}
  }
) => {
  const { trendColor, country } = options

  const lineOptions = reactive({
    legend: {
      data: []
    },
    tooltip: {
      ...tooltipOptions,
      trigger: "axis"
    },
    graphic,
    xAxis,
    grid: {
      left: 40,
      right: 30,
      top: 20,
      bottom: 20,
      ...options.lineGrid
    },
    yAxis: {
      ...yAxis,
      ...options.lineYAxis
    },
    series: [
      {
        data: [],
        type: "line",
        smooth: true,
        itemStyle: {
          color: `rgba(${trendColor},1)`,
          shadowColor: `rgba(${trendColor},1)`,
          shadowBlur: 10,
          borderWidth: 3,
          backgroundColor: `rgba(${trendColor},1)`,
          borderColor: "#ffff00"
        },
        showSymbol: false,
        areaStyle: {
          color: new _graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: `rgba(${trendColor},0.3)` },
              { offset: 1, color: `rgba(${trendColor},0)` }
            ],
            false
          ),
          shadowColor: `rgba(${trendColor},0.5)`
        },
        ...options.lineSeries
      }
    ]
  })

  const linesOptions = reactive({
    legend: {
      data: [],
      itemHeight: 12,
      itemWidth: 20,
      textStyle: {
        color: fontColor,
        fontSize: 11
      }
    },
    tooltip: {
      ...tooltipOptions,
      trigger: "axis"
    },
    graphic,
    xAxis: {
      ...xAxis,
      boundaryGap: true
    },
    grid: [{ left: 45, right: 20, top: 35, bottom: 20 }],
    yAxis,
    series: ["84,112,198", "145,204,117", "0,245,255"].map((item) => {
      return {
        name: "",
        type: "line",
        smooth: true,
        data: [],
        itemStyle: {
          color: `rgba(${item},1)`
        },
        areaStyle: {
          color: new _graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: `rgba(${item},0.3)` },
              { offset: 1, color: `rgba(${item},0)` }
            ],
            false
          ),
          shadowColor: `rgba(${item},0.5)`
        }
      }
    })
  })

  const pieOptions = reactive({
    tooltip: {
      trigger: "item",
      ...tooltipOptions
    },
    color: colorList,
    // [
    // "#065aab",
    // "#066eab",
    // "#0682ab",
    // "#0696ab",
    // "#06a0ab",
    // "#06b4ab",
    // "#06c8ab",
    // "#06dcab",
    // "#06f0ab"
    // ]
    graphic,
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        data: [],
        left: "center",
        width: "80%",
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{value|{c} 次({d}%)}",
          minMargin: 15,
          edgeDistance: 0,
          lineHeight: 15,
          rich: {
            value: {
              fontSize: 10,
              color: "#999"
            }
          },
          color: fontColor,
          fontSize: 14,
          textBorderWidth: 0
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  })

  const barsOptions = reactive({
    legend: {
      data: [],
      itemHeight: 12,
      itemWidth: 20,
      textStyle: {
        color: fontColor,
        fontSize: 11
      }
    },
    tooltip: {
      ...tooltipOptions,
      trigger: "axis"
      // axisPointer: {
      //   type: "cross",
      //   crossStyle: {
      //     color: "#999"
      //   }
      // }
    },
    graphic,
    xAxis: {
      ...xAxis,
      boundaryGap: true
    },
    grid: {
      left: 45,
      right: 20,
      top: 35,
      bottom: 20
    },
    yAxis,
    series: [
      ["#36B7FF", "#0D55D0", "#0D55D0", "rgba(9,152,225,.8)"],
      ["#45DFF4", "#2CC7E2", "#2CC7E2", "rgba(9,152,225,.8)"]
    ].map((item) => {
      return {
        data: [],
        type: "bar",
        barMaxWidth: 20,
        itemStyle: {
          borderWidth: 1,
          borderColor: item[2],
          shadowColor: item[3],
          shadowBlur: 4,
          color: new _graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item[0] },
            { offset: 0.5, color: item[1] },
            { offset: 1, color: item[1] }
          ])
        },
        emphasis: {
          itemStyle: {
            borderColor: "#00d5ff",
            color: new _graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item[0] },
              { offset: 1, color: item[0] }
            ])
          }
        }
      }
    })
  })
  const geoOptions = reactive({
    tooltip: {
      renderMode: "html",
      appendToBody: true,
      className: "map-chart-tooltip",
      formatter: function (params) {
        if (params.seriesType === "scatter") {
          // 在线用户
          if (params.value[2])
            return `<div class="primary">${params.name} <br> 在线用户数：${params.value[2]}</span></div>`
          // 攻击链城市
          else {
            if (params.data.attackTypes?.length) {
              const jsx = `<div class="danger">${
                params.name
              } <br> 攻击类型：${params.data.attackTypes.join(",")}</span>`
              if (params.data.online) {
                return `${jsx} <br> 在线用户数：${params.data.online}</div> `
              } else return `${jsx}</div>`
            } else return `<div class="danger">${params.name}</div>`
          }
        }
        if (params.seriesType === "lines") {
          return `<div class="danger">攻击源：${params.data.fromName} <br> 攻击目的：${
            params.data.toName
          } <br> 攻击类型：${params.data.attackTypes.join(",")}</div>`
        }
      }
    },
    geo: {
      map: country,
      zoom: 1.2,
      aspectScale: 1.3,
      // // 整个地图的外层样式
      itemStyle: {
        shadowColor: "#1963ac",
        shadowBlur: 11,
        shadowOffsetX: 0,
        shadowOffsetY: 8
      }
    },
    series: [
      //地图系列
      {
        type: "map", //地图类型
        // zlevel: 1,
        label: {
          show: false,
          color: "#fff"
        },
        //地图区域的多边形 图形样式
        itemStyle: {
          areaColor: {
            // image: mapBg,
            repeat: "repeat"
          },
          borderColor: "#3754ac",
          borderWidth: 1.5
        },
        emphasis: {
          disabled: true,
          label: {
            color: "#fff"
          },
          itemStyle: {
            areaColor: {
              // image: mapBg,
              repeat: "repeat"
            },
            borderColor: "#00B5D9",
            shadowColor: "#72CBEB",
            shadowBlur: 5,
            color: "#4cfbfd",
          },
          data:[]
        },
        select: {
          // disabled: true,
          label: {
            color: "#fff"
          },
          itemStyle: {
             areaColor: ' rgba(58, 116, 250, 0.3)'
          }
        },
        zoom: 1.2,
        aspectScale: 1.3,
        map: country //使用地图
      },
      // 带涟漪的散点气泡图 在线用户城市
      // {
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   zlevel: 10,
      //   rippleEffect: {
      //     brushType: "stroke",
      //     scale: 4, // 波纹缩放比例
      //     period: 3 // 速度
      //   },
      //   itemStyle: {
      //     color: "#4cfbfd",
      //     shadowBlur: 10,
      //     shadowColor: "#4cfbfd",
      //     opacity: 1
      //   },
      //   data: []
      // },
      // 带涟漪的散点气泡图 告警城市
      // {
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   zlevel: 10,
      //   rippleEffect: {
      //     brushType: "stroke",
      //     scale: 4, // 波纹缩放比例
      //     period: 3 // 速度
      //   },
      //   itemStyle: {
      //     color: "#FF6347",
      //     shadowBlur: 10,
      //     shadowColor: "#FF4500",
      //     opacity: 1
      //   },

      //   data: []
      // },
      // 攻击路径1
      // {
      //   type: "lines",
      //   zlevel: 1,
      //   effect: {
      //     show: true,
      //     period: 5,
      //     trailLength: 0.7,
      //     color: "#FF6347",
      //     symbolSize: 2.5
      //   },
      //   lineStyle: {
      //     color: "#FF6347",
      //     width: 0,
      //     curveness: 0.3
      //   },
      //   data: []
      // },
      // 攻击路径2
      // {
      //   type: "lines",
      //   zlevel: 2,
      //   symbol: ["none", "none"],
      //   symbolSize: 10,
      //   effect: {
      //     show: true,
      //     period: 5,
      //     trailLength: 0,
      //     // symbol: "arrow",
      //     // symbol:
      //     // "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
      //     symbolSize: 3
      //   },
      //   lineStyle: {
      //     color: "#FF6347",
      //     width: 1.5,
      //     opacity: 0.6,
      //     curveness: 0.3
      //   },
      //   data: []
      // },
      // 自我攻击路径
      // {
      //   type: "lines",
      //   zlevel: 2,
      //   symbol: ["none", "none"],
      //   symbolSize: 10,
      //   effect: {
      //     show: true,
      //     period: 5,
      //     trailLength: 0.7,
      //     color: "#FF6347",
      //     symbolSize: 2.5
      //   },
      //   lineStyle: {
      //     color: "#FF6347",
      //     width: 0,
      //     opacity: 0.3
      //   },
      //   silent: true,
      //   polyline: true,
      //   data: []
      // },
      // {
      //   type: "lines",
      //   zlevel: 2,
      //   symbol: ["none", "none"],
      //   symbolSize: 10,
      //   effect: {
      //     show: true,
      //     period: 5,
      //     trailLength: 0,
      //     symbolSize: 3
      //   },
      //   lineStyle: {
      //     color: "#FF6347",
      //     width: 1.5,
      //     opacity: 0.6
      //   },
      //   silent: true,
      //   polyline: true,
      //   data: []
      // }
    ]
  })

  // https://blog.csdn.net/yehaocheng520/article/details/128135783
  const cloudOptions = reactive({
    series: [
      {
        type: "wordCloud",
        sizeRange: [15, 30],
        rotationRange: [0, 0],
        rotationStep: 90,
        gridSize: 15,
        shape: "pentagon",
        width: "100%",
        height: "100%",
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 220),
                Math.round(Math.random() * 220),
                Math.round(Math.random() * 220)
              ].join(",") +
              ")"
            )
          }
        },
        data: []
      }
    ]
  })

  return {
    lineOptions,
    linesOptions,
    pieOptions,
    geoOptions,
    barsOptions,
    cloudOptions,
    generateCircularPath
  }
}
